import React, { useEffect, useState } from 'react'
import { students, getSliceData } from '../../../api/Student'
import './index.less'
import { Input } from 'antd';
import "antd/dist/antd.css";
import { Select, Button, Space, Pagination } from 'antd';
import Table from '../../../component/table/index';
import Navigation from '../../../component/Navigation/index';
import Alert from '../../../component/alert/index'

import {
  EditTwoTone,
  DeleteTwoTone,
  SnippetsTwoTone,
  SearchOutlined,
  DownloadOutlined
} from '@ant-design/icons';
function School() {
  let [totle,settotle]=useState([])
  let [studentData, setstudentData] = useState([])
  let [columns, setcolumns] = useState([])
  let [num, setnum] = useState(0)
  let [pageNumber, setpageNumber] = useState(1)
  let [pageSize, setpageSize] = useState(10)
  //搜索名字
  let [searchname,setsearchname]=useState('')
  //搜索身份证
  let [scid,setscid]=useState('')
  //上学的状态
  let [school,setchool]=useState('')
  //性别
  let [sex,setsex]=useState('')
  //弹框的状态
  let [alertFlag,setalertFlag]=useState(false)
  //弹框的内容
  let [alertcon,setalertcon]=useState()
  //弹框的名称
  let [alertname,setalertname]=useState('')
  //左边的数据
  let [list,setlist]=useState([])
  //网站
  let [college,setcollege]=useState('网站工程')
  //阶段
  let [stage,setstage]=useState('实训')
  //班级
  let [classroom,setclassroom]=useState('2104A')
  //选择器
  function handleChange(value) {
    console.log(`selected ${value}`);
    setchool(value)
  }
  //选择器
  function sexChange(value) {
    console.log(`selected ${value}`);
    setsex(value)
  }
  //点击分页
  function onChange(pageNumber) {
    console.log('Page: ', pageNumber);
    setpageNumber(pageNumber)
  }
  //分页的下拉
  function onShowSizeChange(current, pageSize) {
    console.log(current, pageSize);
    setpageSize(pageSize)
  }
  //关闭
  function close(){
    setalertFlag(false)
  }
    // 左侧菜单栏点击事件
    const handleClick = async (e: any) => {
      console.log(e.key);
      let a=e.key.split("-")
      console.log(a);
      setcollege(a[0])
      setstage(a[1])
      setclassroom(a[2])
      
    }

  const { Option } = Select;
  const setok=()=>{
    getSliceData({college:college,stage:stage,classroom:classroom, pageSize: pageSize, pageNumber: pageNumber }).then((res)=>{
      console.log(res.data.result,123);
      //总数据
      totle=res.data.result.ban
      num=res.data.result.ban.length
      //截取到的数据
      studentData=res.data.result.arr
      setnum(num)
      setstudentData(studentData)
      settotle(totle)
    })
    
  }
  useEffect(() => {
    getSliceData({college:college,stage:stage,classroom:classroom, pageSize: pageSize, pageNumber: pageNumber }).then((res)=>{
      console.log(res.data.result,123);
      //总数据
      totle=res.data.result.ban
      num=res.data.result.ban.length
      //截取到的数据
      studentData=res.data.result.arr
      setnum(num)
      setstudentData(studentData)
      settotle(totle)
    })
   
    let columns = [
      {
        title: "学号",
        dataIndex: "number",
        key: "number",
        width: '150px'
      },
      {
        title: "姓名",
        dataIndex: "name",
        key: "name",
        width: '150px'

      },
      {
        title: "身份证",
        dataIndex: "cid",
        key: "cid",
        width: '200px'

      },
      {
        title: "电话",
        dataIndex: "xsphone",
        key: "xsphone",
        width: '150px'

      },
      {
        title: "班级",
        dataIndex: "class",
        key: "class",
        width: '150px'

      },
      {
        title: "状态",
        dataIndex: "stop",
        key: "stop",
        width: '200px',
       
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <Space size="middle">
            <EditTwoTone  onClick={(text)=>{
              setalertFlag(true)
              console.log(record);
              setalertname('修改')
              setalertcon(record)
            }}/>
            <DeleteTwoTone twoToneColor="#ff4d4f"  onClick={(text)=>{
              setalertFlag(true)
              console.log(record);
              setalertname('删除')
              setalertcon(record)
            }} />
            <SnippetsTwoTone onClick={(text)=>{
              setalertFlag(true)
              console.log(record);
              setalertname('详情')
              setalertcon(record)
            }}/>
          </Space>
        )
      }

    ]
    setcolumns(columns)
    const list = [
      {
        "id": 1,
        "collage": "网站工程",
        "school": [
          {
            "sid":"wsx",
            "name":"实训",
            "classlist":[
                {"classname":"2104A"},
            ]
          },
          {
            "sid":"wzy",
            "name":"专业",
            "classlist":[
                {"classname":"2109A"}
            ]
          },
          {
            "sid":"wzg",
            "name":"专高",
            "classlist":[
                {"classname":"2106A"}
            ]
          }
        ]
      },
      {
        "id": 2,
        "collage": "传媒学院",
        "school": [
          {
            "sid": "czy",
            "name": "专业",
            "classlist": [
              {"classname":"2104A"},
              {"classname":"2109A"}
            ]
          }
        ]
      }
    ]
    setlist(list)
  },[college,stage,classroom,pageSize,pageNumber])
  return (
    <div className="school">
      <div className="left">
      <Navigation
            // 总数据
            data={list}
            // 一标题属性  数组类型  "collage":["网站工程", "人工智能"]
            primaryNavigationProps="collage"
            // 二级标题属性  "collage":["网站", "人工"]
            childrenProps='school'
            // 二级标题对象属性
            childrenItem='name'
            // 获取当前自己标题的key
            handleClick={handleClick}
            // 设置袭击标题的key值
            setChildrenKey="sid"
            isDeepMenu={true}
            deepProps="classlist"
            deepItem="classname"
            // 样式
            style={{ width: 200, height: 500, border: "1px solid #ccc" }}
            // defaultOpenKeys={['sub1']}
          />
      </div>
      <div className="right">
        <div className="rightTop">
          <Input placeholder="姓名"onChange={(e)=>{
            console.log(e.target.value);
            let searchname=e.target.value
            setsearchname(searchname)
          }}/>
          <Input placeholder="身份证" onChange={(e)=>{
            console.log(e.target.value);
            setscid(e.target.value)
          }} />
          <Select defaultValue="状态" style={{ width: 120 }} onChange={handleChange}>
            <Option value="正常">正常</Option>
            <Option value="休学">休学</Option>
            <Option value="退学" >退学</Option>
            <Option value="毕业">毕业</Option>
            <Option value="开除">开除</Option>
          </Select>
          <Select defaultValue="性别" style={{ width: 120 }} onChange={sexChange}>
            <Option value="男">男</Option>
            <Option value="女">女</Option>
          </Select>
          <Button type="primary" icon={<SearchOutlined />} onClick={()=>{
            //姓名
            let arr=[]
           totle.filter((item)=>{
             if(item.name.indexOf(searchname)!==-1&&item.cid==scid&&item.stop==school&&item.sex==sex){
               arr.push(item)
             }
           })
           console.log(arr);
           totle=arr
          console.log(totle);
          setstudentData(totle)
           setnum(num)
          }}>搜索</Button>
          <Button type="primary" icon={<DownloadOutlined />}>导出</Button>
          {/* <Button type="primary" onClick={()=>{
            setsearchname('')
            setstudentData(studentData)
          }}>重置</Button> */}
          
        </div>
        <div>
          <Table studentData={studentData} columns={columns}></Table>
        </div>
        <div className="page">
          <Pagination
            showQuickJumper
            defaultCurrent={1}
            total={num}
            showSizeChanger
            defaultPageSize={10}
            onShowSizeChange={onShowSizeChange}
            onChange={onChange} />
        </div>
        <div>
          {
            alertFlag==true?<Alert alertName={alertname} setok={setok} fen={'ma'} con={alertcon} width={'700px'} alertFlag={true} close={close}></Alert>:null
          }
        </div>
      </div>

    </div>
  )
}
export default School;
